<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
    </style>
</head>
<body>
    <div class="box" id="luoli">洛璃</div>
    <div class="box">姚水</div>
    <div class="text">天荡</div>
    <div class="date">2024/9/2</div>
    <script>
        //写css选择器来获取元素  静态获取
        let oDiv1 = document.querySelector('#luoli') //只能获取符合条件的第一个元素，推荐使用id来查找元素
        let oDiv2 = document.querySelectorAll('div') //获取符合条件的所有元素，返回对象的结果是存有元素对象的类数组
        //通过名称获取元素  动态获取
        let oWrap = document.getElementById("wrap") //通过id查找获取符合条件的一个元素
        let oBox = document.getElementsByClassName("box") //通过class名查找获取符合条件的所有元素，返回类数组
        /*
            DOM: document object model
            全局内置对象：document 相当于整个网页文档
            获取节点：(元素节点/文本节点/属性节点/......)
            操作元素的内容：
                innerHTML 获取/修改元素的HTML内容
                innerText 获取/改修元素的文本内容
            
            事件的监听：
                鼠标事件：
                    onclick 左键单击
                    ondblclick 左键双击
                    onmouseover 鼠标移入
                    onmouseleave  鼠标移出
                    onmousedown  鼠标按下
                    onmouseup    鼠标抬起

        */
    </script>
</body>
</html>